<template>
  <div class="addGs-box">
    <div class="wrapper">
      <el-form label-position="top" ref="form" :model="formList" label-width="80px" :inline="true">
        <el-form-item data-dsc="维修工时分类2" label="维修工时分类：">
          <!-- <el-select style="width: 235px" @change="changemainG" v-model="formList.mainGroupCode" filterable placeholder="请选择" clearable>
            <el-option v-for="item in labourTreeList" :key="item.MAIN_GROUP_CODE" :label="item.MAIN_GROUP_NAME" :value="item.MAIN_GROUP_CODE"></el-option>
          </el-select> -->

          <el-cascader placeholder="请选择" :props="mainGroupProps" clearable v-model="formList.mainGroupCode" :options="labourTreeList"></el-cascader>
        </el-form-item>
        <el-form-item label="维修工时代码：">
          <el-input style="width: 235px" clearable v-model="formList.labourCode" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="维修工时名称：">
          <el-input style="width: 235px" clearable v-model="formList.labourName" placeholder="请输入"></el-input>
        </el-form-item>
        <div class="btn">
          <el-button type="primary" size="small" @click="changeHandle">查询</el-button>
          <el-button size="small" @click="handleReset" style="color: #2c7acd; border: 1px solid #2c7acd">重置</el-button>
        </div>
      </el-form>

      <FilterTable
        ref="tablegs"
        :columnsRef="$route.path + 'cutomerAddWxgs'"
        :height="300"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        selectionType="multiple"
        :datakey="'rows'"
        :onSyncTableData="tabledataFun"
        :onRowSelectChange="selectChangeHandle"
        :onColumnsChange="columns => (this.columns = columns)"
      ></FilterTable>
    </div>

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <div class="bottom-main">
        <div class="btn">
          <el-button @click="confirmDrawer" type="primary">添 加</el-button>
          <el-button @click="closeDrawerS">取 消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
// import { getWxtypeSelect, queryLabour } from '@/api-server/repair/repairReception/customer';
// import { queryPartList } from '@/api-server/repair/repair/labourManager';
import { getItemList } from '@/api/repair/batchEventManagement/activityDistribution';


export default {
  name: 'packageAddWxgs',
  mixins: [dictionary],
  components: {},
  props: [],
  data() {
    return {
      selectedRows: [],
      labourTreeList: [],
      columns: this.createTableColumns(),
      fetchApi: getItemList,
      fetchParams: { xhrAbort: true },
      list: [],
      formList: {
        labourCode: '',
        labourName: '',
        mainGroupCode: ''
      },
      visibleTimeonce: false,
      btnHandle: true,
      text: '',
      seriesList: [],
      partNoSelect: false,
      formSubmitdata: {},
      listPart: [], // {{this.$partsName}}数据
      defaultSelections: [], // 默认选中{{this.$partsName}}数据
      selectPartRows: [],
      mainGroupProps: { value: 'mainGroupCode', label: 'mainGroupName', checkStrictly: true }
    };
  },
  mounted() {
    this.getWxtypeSelect();
    this.queryPartList();
    // this.setData();
  },
  beforeDestroy() {
    // console.log(this.basetable.$refs, 'destroyeddestroyed');
    //  this.basetable.$refs.appTable.clearSelection();
  },
  methods: {

    async queryPartList() {
      const res = await queryPartList();
      this.labourTreeList = res.data;
    },
    handleReset() {
      this.formList = {
        labourCode: '',
        labourName: ''
      };
    },
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '维修工时代码',
          fieldName: 'labourCode',
          placeholder: '维修工时代码...'
        },
        {
          type: 'INPUT',
          label: '维修工时名称',
          fieldName: 'labourName',
          placeholder: '维修工时名称...'
        }
      ];
    },
    createTableColumns() {
     return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },

        {
          title: '维修工时代码',
          dataIndex: 'labourCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修工时名称',
          dataIndex: 'labourName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '标准工时',
          dataIndex: 'stdLabourHour',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
         title: '车系',
         dataIndex: 'seriesCode',
         sorter: true,
         filter: true,
         filterType: 'input',
        },
          {
         title: '车型',
         dataIndex: 'modelLabourCode',
         sorter: true,
         filter: true,
         filterType: 'input',
        },
      ];
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);

      console.log(this.fetchParams);
    },
    accountsTypeChange(val) {
      // console.log(val, 'accountsTypeChange');
      for (const i of this.bottomFilterList) {
        if (i.fieldName === 'chargePartitionCode') {
          i.initialValue = val ? this.totalData.find(x => x.chargePartitionCode + '' === val + '').chargePartitionAttribute : null;
        }
        if (i.fieldName === 'labourPrice') {
          //
        }
      }
    },
    tabledataFun(data) {
      // // console.log(data, this.seriesList,'------')
      for (const i of data) {
        for (const k of this.seriesList) {
          if (i.modelLabourCode + '' === k.value + '') {
            i.modelLabourName = k.text;
          }
        }
      }
    },
    selectChangeHandle(rows) {
      this.selectedRows = rows;
    },

    async getWxtypeSelect() {
      const res = await getWxtypeSelect();
      this.columns[4].filterItems = this.columns[4].editItems = res.data.map(x => ({
        value: x.REPAIR_TYPE_CODE,
        text: x.REPAIR_TYPE_NAME
      }));
    },
    confirmDrawer() {
      if (this.selectedRows.length) {
        this.closeDrawer(this.selectedRows);
      } else {
        this.$notify({
          title: '提示信息',
          message: '请选择一个项目',
          type: 'warning'
        });
      }
    },
    closeDrawer(list) {
      for (const i of list) {
        i.discount = 1;
        i.labourCode = i.labourCodef;
      }
      // list[0].discount = 1;
      // list[0].labourCode = list[0].labourCodef;
      this.$emit('close', list);
    },
    closeDrawerS() {
      this.$emit('close');
    }
  }
};
</script>

<style lang="less" scoped>
.addGs-box {
  .wrapper {
    height: calc(100vh - 250px);

    /deep/ .el-form {
      margin-left: 24px;
      position: relative;

      .el-form-item {
        margin-right: 20px;
        margin-bottom: 10px;
      }

      .el-form-item--small .el-form-item__content {
        line-height: 20px;
      }

      .el-form-item__label {
        padding: 0;
        line-height: 20px;
      }
    }

    .btn {
      position: absolute;
      top: 18px;
      right: 20px;
    }
  }
  .bottom-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
      width: 100%;
      text-align: right;
    }
  }
}
</style>
